import React, { Component } from 'react'
import { Route, Routes } from 'react-router-dom'
import MyNavLink from '../../components/MyNavLink'

import Alpha from './Alpha'
import Beta from './Beta'
import Delta from './Delta'
import Epsilon from './Epsilon'
import Gamma from './Gamma'

import './index.css'

export default class HomeImage extends Component {

  state= {
    mouse: false
  }

  onMouseEnter = () => {
    this.setState({ mouse: true })
  }

  onMouseLeave = () => {
    this.setState({ mouse: false })
  }

  render() {
    return (
      <div>
        <ul className="nav">
          <li className='slide1'></li>
          <li className='slide2'></li>
          <li>
            <MyNavLink  
              to='/alpha'
              className={this.state.mouse? {onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave} : ''}
            >
              Alpha
            </MyNavLink>
          </li>
          <li>
            <MyNavLink  to='/beta'>Beta</MyNavLink>
          </li>
          <li>
            <MyNavLink  to='/gamma'>Gamma</MyNavLink>
          </li>
          <li>
            <MyNavLink  to='/delta'>Delta</MyNavLink>
          </li>
          <li>
            <MyNavLink  to='/epsilon'>Epsilon</MyNavLink>
          </li>
        </ul>
        {/* 注册路由 */}
        <Routes>
          <Route path='/alpha' component={Alpha}/>
          <Route path='/beta' component={Beta}/>
          <Route path='/gamma' component={Gamma}/>
          <Route path='/delta' component={Delta}/>
          <Route path='/epsilon' component={Epsilon}/>
        </Routes>
      </div>
    )
  }
}
